// 变量
$about-me: '.hx-about-me';
$carousel: '.hx-carousel';
//轮播图
$carousel-xl-width: 17.625rem;
$carousel-xl-height: 17.375rem;
$carousel-lg-width: 16.375rem;
$carousel-lg-height: 16.25rem;
$carousel-md-width: 13.875rem;
$carousel-md-height: 13rem;
$carousel-sm-width: 100%;
$carousel-sm-height: 14.5rem;

//.hx-minw-
@for $i from 0 through 5 {
  .hx-minw-#{$i} {
    min-width: (5em * $i);
  }
}
//.hx-maxw-
@for $i from 0 through 5 {
  .hx-maxw-#{$i} {
    max-width: (5em * $i);
  }
}
//.hx-minh-
@for $i from 0 through 5 {
  .hx-minh-#{$i} {
    min-height: (5em * $i);
  }
}
//.hx-maxh-
@for $i from 0 through 5 {
  .hx-maxh-#{$i} {
    max-height: (5em * $i);
  }
}

@each $w in 0, 25, 30, 50, 70, 75, 100 {
  .w-#{$w} {
    width: #{$w}% !important;
  }
  .h-#{$w} {
    height: #{$w}% !important;
  }
}
.hx-about-me,
.hx-carousel .carousel-item {
  height: 11.875rem;
}
.hx-carousel .carousel-thumbnail {
  height: 5.875rem;
}
/*小屏*/
@media (min-width: 576px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
    .w-sm-#{$w} {
      width: #{$w}% !important;
    }
    .h-sm-#{$w} {
      height: #{$w}% !important;
    }
  }
  .hx-carousel .carousel-thumbnail,
  .hx-carousel .carousel-item {
    height: $carousel-sm-height;
  }
}
/*中屏*/

@media (min-width: 768px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
    .w-md-#{$w} {
      width: #{$w}% !important;
    }
    .h-md-#{$w} {
      height: #{$w}% !important;
    }
  }

  #{$about-me},
  .hx-carousel .carousel-thumbnail,
  #{$carousel} .carousel-item {
    height: $carousel-md-height;
  }

  #{$about-me} {
    width: $carousel-md-width;
  }
}
/*大屏*/
@media (min-width: 992px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
    .w-lg-#{$w} {
      width: #{$w}% !important;
    }
    .h-lg-#{$w} {
      height: #{$w}% !important;
    }
  }

  #{$about-me},
  #{$carousel} .carousel-thumbnail,
  #{$carousel} .carousel-item {
    height: $carousel-lg-height;
  }
  #{$about-me} {
    width: $carousel-lg-width;
  }
}
/*超大屏*/
@media (min-width: 1200px) {
  @each $w in 0, 25, 30, 50, 70, 75, 100 {
    .w-xl-#{$w} {
      width: #{$w}% !important;
    }
    .h-xl-#{$w} {
      height: #{$w}% !important;
    }
  }

  #{$about-me},
  #{$carousel} .carousel-thumbnail,
  #{$carousel} .carousel-item {
    height: $carousel-xl-height;
  }
  #{$about-me} {
    width: $carousel-xl-width;
  }
}
